<template>
  <!--注册-->
  <div class="wrap">
    <div v-if="step === 1" class="tdbModule register">
      <div class="registerTitle">注册账户</div>
      <div class="registerLc1">
        <p class="p1">填写账户信息</p>
        <p class="p2">注册成功</p>
      </div>

      <div class="registerCont">
        <ul>
          <li>
            <span class="dis"></span>
            <input v-model="userInfo.userType" type="radio" value="1"/>
            我要投资
            <input v-model="userInfo.userType" type="radio" value="2"/>
            我要借钱
          </li>
          <li class="telNumber">
            <span class="dis">手机号码</span>
            <input class="input" v-model="userInfo.mobile"/>
          </li>

          <li class="telNumber">
            <span class="dis">用户昵称</span>
            <input class="input" v-model="userInfo.nickName"/>
          </li>

          <li>
            <span class="dis">用户密码</span>
            <input type="password" v-model="userInfo.password" class="input"/>
            <span class="info">
              6-24个字符，英文、数字组成，区分大小写
            </span>
          </li>

          <li>
            <span class="dis">确认密码</span>
            <input type="password" v-model="userInfo.password2" class="input"/>

          </li>

          <li class="agree">
            <input type="checkbox" v-model="checked"/>
            我同意《
            <NuxtLink to="#" target="_black">尚融宝注册协议</NuxtLink>
            》
            <span>请查看协议</span>
          </li>
          <li class="btn">
            <button @click="register()">
              下一步
            </button>
          </li>
        </ul>
      </div>
    </div>

    <div v-if="step === 2" class="tdbModule register">
      <div class="registerTitle">注册账户</div>
      <div class="registerLc2">
        <p class="p1">填写账户信息</p>
        <p class="p2">注册成功</p>
      </div>
      <div class="registerCont">
        <ul>
          <li class="scses">
            {{ this.userInfo.mobile }} 恭喜您注册成功！
            <NuxtLink class="blue" to="/login">
              请登录
            </NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import '~/assets/css/register.css'

export default {
  data() {
    return {
      step: 1, //注册步骤
      checked: false,
      userInfo: {
        userType: 1,
      },

    }
  },

  methods: {

    //注册
    register() {
      //判断手机号是否为空
      if (this.userInfo.mobile == null) {
        this.$message.error('手机号不能为空,请填写');
        return false;
      }

      //判断手机号格式
      let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(16[0-9]{1}))+\d{8})$/;
      if (!myreg.test(this.userInfo.mobile)) {
        this.$message.error('手机号格式不正确,请重新填写');
        return false;
      }
      //判断用户名是否为空
      if (this.userInfo.nickName == null) {
        this.$message.error('用户名不能为空,请填写');
        return false;
      }
      //判断密码是否为空
      if (this.userInfo.password == null) {
        this.$message.error('密码不能为空,请填写');
        return false;
      }

      //判断两次密码是否一致
      if (this.userInfo.password !== this.userInfo.password2) {
        this.$message.error('两次密码不一致,请重新填写');
        return false;
      }
      if (this.checked == false) {
        this.$message.error('请勾选尚金融注册协议');
        return false;
      }
      //查询手机号是否存在
      this.$axios.$get("/userInfo/checkMobile/" + this.userInfo.mobile)
          .then(response => {
                if (!response.data) {
                  this.$message.error('该手机号已注册,请更换手机号');
                  return false;
                } else {
                  this.$axios.$post("/userInfo/register", this.userInfo)
                      .then(response => {
                        if (response.data) {
                          this.$message.success(response.message)
                          this.$router.push("/login")
                        } else {
                          this.$message.error(response.message)
                        }
                      })
                }
              }
          )
          .catch(error => {
            console.log(error);
          });
    },
  }
}

</script>
